<template>
  <el-container
    class="vip-layout-horizontal"
    :class="{
      fixed: fixedHeader,
      'no-tabs-bar': !showTabs,
    }"
  >
    <!--    <el-header class="vip-layout-header">-->
    <!--      <vab-header layout="horizontal" />-->
    <!--    </el-header>-->
    <!--    <vab-header layout="horizontal" />-->

    <vip-tabs v-show="showTabs" />
    <el-container class="vip-main">
      <vip-app-main />
    </el-container>
    <vip-footer />

  </el-container>
</template>

<script lang="ts" setup>

defineOptions({
  name: 'VipLayoutHorizontal',
})

interface PropsType {
  collapse: boolean,
  fixedHeader: boolean,
  showTabs: boolean,
  device: string
}

withDefaults(defineProps<PropsType>(), {
  collapse: false,
  fixedHeader: true,
  showTabs: true,
  device: 'desktop',
})

</script>

<style lang="scss" scoped>

.vip-layout-header {
  padding: 0 !important;
  border: 0;
}

.vip-layout-horizontal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 92% !important;
  margin: auto !important;


  :deep() {
    .vip-main {
      display: flex;
      width: 92% !important;
      margin: auto !important;
    }
  }

  .vip-tabs-horizontal {
    background: var(--el-color-white);
  }

  .vab-nav {
    .fold-unfold {
      display: none;
    }
  }
}
</style>
